<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>详细页面</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/DPlayer.min.css">
    <script src="/static/DPlayer.min.js"></script>
</head>
<body>
<!--<nav>-->
<!--    <button id="backHome" class="layui-btn" style=" margin: 14px; background-color: #393D49;"><i-->
<!--            class="layui-icon layui-icon-return" style="float:left; color: #fff; font-size: 20px;"></i></button>-->
<!--    <li>欢迎您：<span th:text="${user.username}">张无忌123</span></li>-->
<!--</nav>-->
<!--导航栏开始-->
<div class="admin-header">
    <ul class="layui-nav">
        <li class="layui-nav-item admin-logo">
            <button id="backHome" class="layui-btn" style=" margin: 14px; background-color: #393D49;"><i
                    class="layui-icon layui-icon-return" style="float:left; color: #fff; font-size: 20px;"></i></button></li>
        <li class="layui-nav-item">
            <a href="javascript:;" th:text="${user.username}">张无忌123</a>
            <dl class="layui-nav-child nav-style">
                <dd><a href="javascript:;">修改密码</a></dd>
                <dd><a href="/user/logout">退出登录</a></dd>
            </dl>
        </li>
    </ul>
</div>
<!--导航栏结束-->
<main>
    <div class="content">
        <ul class="vote-specific-info">
            <input id="videoUrl" type="hidden" th:value="${candidate.videoUrl}">
            <div id="DPlayer"></div>
            <li class="vote-specific-status">
                <ul class="layui-row">
                    <li class="layui-col-xs4">
                        <a class="statistic-num" href="#" th:text="${candidate.poll}">7</a>
                        <a href="#">票数</a>
                    </li>
                    <li class="layui-col-xs4">
                        <a class="statistic-num" href="#" th:text="${rank}">77</a>
                        <a href="#">排名</a>
                    </li>
                    <li class="layui-col-xs4">
                        <a href="#"><span class="statistic-num" th:text="${distance}">77</span>票</a>
                        <a href="#">距上一名</a>
                    </li>
                </ul>
            </li>
            <li class="vote-specific-content">
                <div class="layui-form-item">
                    <input type="hidden" id="cid" th:value="${candidate.id}">
                    <input type="hidden" id="vid" th:value="${candidate.vid}">
                    <label for="name">姓名</label>
                    <input th:value="${candidate.user.username}" class="layui-input" id="name" value="赵敏" type="text" disabled>
                    <label for="sex">性别</label>
                    <input th:if="${candidate.user.sex eq true}" class="layui-input" id="sex" value="男" type="text" disabled>
                    <input th:if="${candidate.user.sex eq false}" class="layui-input" id="sex" value="女" type="text" disabled>
                    <label for="academy">学院</label>
                    <input th:value="${candidate.user.academy}" class="layui-input" id="academy" value="电信学院" type="text" disabled>
                    <label for="specific_info">个人事迹</label>
                    <textarea th:text="${candidate.details}" id="specific_info" placeholder="请输入" class="layui-textarea" disabled>我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌我爱张无忌</textarea>
                </div>
            </li>
            <li class="vote-specific-info-btn">
                <button id="voting-btn" class="layui-btn"><i class="layui-icon layui-icon-praise"></i>为Ta投票</button>
            </li>
        </ul>
    </div>
</main>
<footer>
    <p>
        <span>地址：安徽省六安市裕安区月亮岛</span>
        <!--<span>当前IP地址：211.70.164.115</span>-->
        <!--<span>访问量：2420493</span>-->
    </p>
    <p>
        <span>皖西学院 Copyright 2019-2025 @ All Rights Reserved</span>
    </p>
    <p>
        <span>建议使用IE9.0或以上版本</span>
    </p>
</footer>
<script src="/static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/model'
    }).use(['jquery', 'layer', 'element'], function () {
        var $ = layui.$
            ,layer = layui.layer
            ,element = layui.element;

        //播放器
        const dp = new DPlayer({
            container: document.getElementById('DPlayer')
            ,screenshot: true
            ,video: {
                url:'/video?videoUrl='+$('#videoUrl').val()
            }
        });

        //返回主页面
        $('#backHome').click(function () {
            var vid = $('#vid').val();
            window.location.href = '/user/vote/' + vid;
        });

        //绑定投票按钮
        $('#voting-btn').click(function () {
            //获取vid和cid
            var vid = $('#vid').val();
            var cid = $('#cid').val();
            //开始发送网络请求
            $.ajax({
                type: 'POST'
                ,url: '/user/vote'
                ,data: {vid: vid, cid: cid}
                ,success: function (res) {
                    if (res.status == 200){
                        layer.msg(res.msg)
                    }else{
                        layer.alert(res.msg, {
                            skin: 'layui-layer-red'
                            ,closeBtn: 0
                            ,anim: 4 //动画类型
                        });
                    }
                }
            })
        })
    })
</script>
</body>
</html>